<template>
  <div class="main">
    <el-breadcrumb separator="-->">
      <el-breadcrumb-item :to="{ path: '/user/center' }">交易管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-card> 个人信息详细 </el-card> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的订单</span>
      </div>
      <!-- 订单区 -->
      <div class="box-body">
        <table class="goods">
          <thead>
            <tr>
              <th width="520">宠物信息</th>
              <th width="170">单价</th>
              <th width="170">数量</th>
              <th width="170">小计</th>
              <th width="170">实付</th>
              <th width="170">状态</th>
              <th width="170">时间</th>
              <th width="170">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 此处v-for -->
            <tr v-for="item in List" :key="item.oid">
              <td>
                <a href="javascript:;" class="info">
                  <img :src="item.order_img" alt="" />
                  <div class="right">
                    <p>{{ item.pet_name }}</p>
                    <p>
                      颜色：{{ item.pet_color }}<br />
                      出生地：{{ item.pet_place }}
                    </p>
                  </div>
                </a>
              </td>
              <td>&yen;{{ item.pet_price }}</td>
              <td>1</td>
              <td>&yen;{{ item.pet_price }}</td>
              <td>&yen;{{ item.pet_price }}</td>
              <td>{{ item.isReturn === 1 ? '已退货' : item.isSend === 0 ? '未发货' : '已发货' }}</td>
              <td>{{ $toDate(item.create_time) }}</td>
              <td>
                <el-button type="danger" :disabled="item.isReturn === 1" @click="applyForReturn(item.oid)"
                  >申请退货</el-button
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getUserOrder, returnOrder } from '@/api/order'
export default {
  name: 'UserInfo',
  data() {
    return {
      List: [],
      isReturn: 1,
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    }
  },
  created() {
    // this.uid = this.$store.state.user.uid
    this.initUserInfo()
  },
  methods: {
    initUserInfo() {
      const uid = this.$store.state.user.uid
      getUserOrder({ uid, pagenum: this.queryInfo.pagenum }).then((result) => {
        // console.log('result', result.data)
        this.List = result.data
        this.total = result.total.total
      })
    },
    async applyForReturn(oid) {
      const confirmResult = await this.$confirm('此操作将发起"退货申请", 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return

      const result = await returnOrder({ oid })
      console.log('result', result)
      if (result.status !== 0) return this.$message.error('发起退货申请失败！')

      this.$message.success('发起退货申请成功！')

      this.initUserInfo()
    },
    // 分页区的当前页数据显示的条数
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.initUserInfo()
    },
    // 当前页面值
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.initUserInfo()
    },
  },
}
</script>

<style scoped lang="less">
.main {
  .el-breadcrumb {
    margin-top: 20px;
  }
  .el-card {
    margin-top: 20px;
    width: 100%;
    height: 100%;
  }
  .el-form {
    margin-top: 50px;
  }
  .anquan-title {
    margin-top: 30px;
  }
  .goods {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    .info {
      display: flex;
      text-align: left;
      text-decoration: none;
      color: #27ba9b;
      img {
        width: 70px;
        height: 70px;
        margin-right: 20px;
      }
      .right {
        line-height: 24px;
        p {
          &:last-child {
            color: #999;
          }
        }
      }
    }
    tr {
      th {
        background: #f5f5f5;
        font-weight: normal;
      }
      td,
      th {
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;
        &:first-child {
          border-left: 1px solid #f5f5f5;
        }
        &:last-child {
          border-right: 1px solid #f5f5f5;
        }
      }
    }
  }
}
.box-body {
  padding: 20px 0;
  // width: 100%;
}
.box-card {
  width: 1100px;
}
.el-pagination {
  margin-top: 20px;
  margin-bottom: 50px;
}
</style>
